<script setup>
import { inject, onMounted, onUnmounted } from "vue"
import { useRoute, onBeforeRouteUpdate } from "vue-router"
import {
  DrawEvent,
  DrawPoint,
  DrawLine,
  DrawPolygon,
  DrawRect,
  DrawCircle,
} from "@antv/l7-draw"

let map, scene, draw
const route = useRoute()
function initDraw(type) {
  if (draw) {
    draw.destroy()
    draw = null
  }
  switch (type) {
    case "point":
      draw = new DrawPoint(scene, {})
      break;
    case "line":
      draw = new DrawLine(scene, {
        distanceOptions: {},
      })
      break
    case "polygon":
      draw = new DrawPolygon(scene, {
        areaOptions: {},
      })
      break
    case "rect":
      draw = new DrawRect(scene, {
        areaOptions: {},
      })
      break
    case "circle":
      draw = new DrawCircle(scene, {
        areaOptions: {},
      })
      break
  }
  draw.enable()
}
onBeforeRouteUpdate((to) => {
  initDraw(to.params.type)
})
onMounted(() => {
  ({ map, scene } = inject("mapScene"))
  map.flyTo({ center: [114.3, 30.5], zoom: 7 });
  initDraw(route.params.type);
})
onUnmounted(() => {
  if (draw) {
    draw.destroy()
    draw = null
  }
})

class Draw {
  constructor(scene, options = {}) {
    this.scene = scene
    this.options = options
    this.tools = {}
  }
  initDraw() {}
}
</script>

<template></template>

<style lang="scss"></style>
